<script>
	// <script setup>
	// import {ref} from 'vue'
	// let count = ref(0);
	import * as echarts from 'echarts';
	export default {
		name: 'databoard',
		data() {
			return {
				data: {
					count: 0
				},
				list: [],
				waitlist: [{
						title: '-木木',
					},
					{
						title: '-木木',
					},
					{
						title: '-木木',
					},
				],
				barOption: {
					title: {
						text: '各分类文案情况'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: [],
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value',
						name: 'y轴单位',
					}],
					series: [{
						name: '发布数量',
						type: 'bar',
						barWidth: '20',
						data: []
					}]
				},
				lineOPtion: {
					title: {
						text: '综合分析'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['文案使用次数', '文案新增次数', '用户数量趋势']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: []
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							name: '文案使用次数',
							type: 'line',
							stack: 'Total',
							data: []
						},
						{
							name: '文案新增次数',
							type: 'line',
							stack: 'Total',
							data: []
						},
						{
							name: '用户数量趋势',
							type: 'line',
							stack: 'Total',
							data: []
						}
					]
				},
				boardData: {
					hotArticle: {},
					goduser: []
				},
				myChart: null,
				myChart1: null,
			}
		},
		created() {

		},
		computed() {

		},
		mounted() {
			this.getdata();
			// 基于准备好的dom，初始化echarts实例
			// this.initEcharts()

		},
		methods: {
			async getdata() {
				let rs = await this.muajax.databoard();
				if (rs.status == 200) {
					console.log(rs)
					// 图表一
					this.boardData = rs.data
					this.barOption.xAxis[0].data = this.boardData.charArt.map(item => item.name)
					this.barOption.series[0].data = this.boardData.charArt.map(item => item.sum)
					// 图表二
					this.lineOPtion.xAxis.data = rs.data.charNewArt.map(item => item.data)
					this.lineOPtion.series[0].data = rs.data.charUsNum.map(item => item.num)
					this.lineOPtion.series[1].data = rs.data.charNewArt.map(item => item.num)
					this.lineOPtion.series[2].data = rs.data.charUser.map(item => item.num)
					this.initEcharts()
				}
			},

			initEcharts() {
				let myChart = echarts.init(document.querySelector('.bar_echars'));
				let myChart1 = echarts.init(document.querySelector('.line_echars'));
				// 绘制图表
				myChart.setOption(this.barOption);
				myChart1.setOption(this.lineOPtion);
				window.addEventListener("resize", () => {
					// 让我们的图表调用 resize这个方法
					myChart.resize();
					myChart1.resize();
				});
			}



		}
	}
</script>

<template>
	<a-card>

		<a-row>
			<a-col :span="12">
				<div class="flex smile">
					<div class="monitor-face-smile"><i></i></div>
					<h2 class="flex1">安好，愉快的开始您一天的工作吧！</h2>
				</div>
			</a-col>
		</a-row>
		<a-row class="text-center">
			<a-col :span="6">
				<a-statistic title="今日新增用户" :value="boardData.todayUserCount" style="margin-right: 50px">
					<template #prefix>
						<ArrowUpOutlined class="upnum" />
					</template>
				</a-statistic>
			</a-col>
			<a-col :span="6">
				<a-statistic title="用户总数" :value="boardData.userCount" style="margin-right: 50px">
					<template #prefix>
						<ArrowUpOutlined class="upnum" />
					</template>
				</a-statistic>
			</a-col>
			<a-col :span="6">
				<a-statistic title="今日新增文案" :value="boardData.todayFodCount" style="margin-right: 50px">
					<template #prefix>
						<ArrowUpOutlined class="upnum" />
					</template>
				</a-statistic>
			</a-col>
			<a-col :span="6">
				<a-statistic title="文案总数" :value="boardData.fodCount" style="margin-right: 50px">
					<template #prefix>
						<ArrowUpOutlined class="upnum" />
					</template>
				</a-statistic>
			</a-col>
		</a-row>
		<a-row class="box">
			<a-col :span="12">
				<a-card title="待办事项">
					<a-row class="text-center">
						<a-col :span="12">
							<a-statistic title="今日新增待审核文案" :value="boardData.todayWaits" style="margin-right: 50px" />
						</a-col>
						<a-col :span="12">
							<a-statistic title="历史遗留待审核文案" :value="boardData.otherWaits" style="margin-right: 50px" />
						</a-col>
					</a-row>
					<a-list item-layout="horizontal" :data-source="boardData.waitList">
						<template #renderItem="{ item }">
							<a-list-item>
								<a-list-item-meta :description="item.text">
									<template #title>
										<div class="flex">
											<div class="flex1">{{ item.nikcname }}</div>
											<div>
												<IssuesCloseOutlined style="color:orange" />
												{{ ['','待审核','已审核','未通过'][item.type] }}
											</div>
										</div>
									</template>
									<template #avatar>
										<a-avatar
											:src="item.head?item.head:'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'" />
									</template>
								</a-list-item-meta>
							</a-list-item>
						</template>
					</a-list>

					<p class="text-center" style="color:#888">
						● ● ●
					</p>
					<a-button type="primary" block>
						<router-link to="fodlist">马上去去审核</router-link>
					</a-button>
				</a-card>
			</a-col>
			<a-col :span="12">
				<a-card title="本周爽文">
					<div v-if="boardData.hotArticle?.id">
						<a-list item-layout="horizontal" :data-source="[boardData.hotArticle]">
							<template #renderItem="{ item }">
								<a-list-item>
									<a-list-item-meta :description="item.text">
										<template #title>
											{{item.nikcname}}
										</template>
										<template #avatar>
											<a-avatar
												:src="item.head?item.head:'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'" />
										</template>
									</a-list-item-meta>
								</a-list-item>
							</template>
						</a-list>
						<a-row class="text-center mm-b-5 hotart">
							<a-col :span="12">引用次数：{{boardData.hotArticle?.uscount}}</a-col>
							<a-col :span="12">发布时间：{{boardData.hotArticle?.create_time}}</a-col>
						</a-row>
					</div>
					<a-empty v-else />
				</a-card>

				<a-card title="本周牛人" class="mm-t-20">
					<div v-if="boardData.goduser?.length">
						<a-list item-layout="horizontal" :data-source="boardData.goduser">
							<template #renderItem="{ item }">
								<a-list-item>
									<a-list-item-meta>
										<template #description>
											<a-row class="hotart mm-t-10">
												<a-col :span="12">
													发文统计：{{item.artCount}}次
												</a-col>
												<a-col :span="12">
													引用统计：{{item.quoteCount}}次
												</a-col>
											</a-row>
										</template>
										<template #title>
											{{item.nikcname}}
										</template>
										<template #avatar>
											<a-avatar
												:src="item.head?item.head:'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'" />
										</template>
									</a-list-item-meta>
								</a-list-item>
							</template>
						</a-list>
					</div>
					<a-empty v-else />
				</a-card>
			</a-col>
		</a-row>
		<div class="echars-box">
			<div class="bar_echars" style="height:220px"></div>
			<div class="line_echars" style="height:220px;margin-top:100px"></div>
		</div>

		<!-- <div>index</div>
    <div>state数据</div>
    <a-button @click="data.count++">{{ data.count }}</a-button>
    <button @click="$store.dispatch('increment')">state:{{ $store.state.count }}</button>
    <div>
      <a-space>
        <span>{{ $store.getters.getse }}</span>
        <span>{{ $store.getters.gets2(123) }}</span>
      </a-space>
    </div> -->
		<!-- <div style="height:100px">{{ JSON.stringify($store.state.user) }}</div> -->
	</a-card>
</template>

<style lang="less" scoped>
	.hotart {
		color: #333;
		font-size: 16px;
	}

	.upnum {
		color: green;
		font-size: 20px;
	}

	.smile {
		padding-bottom: 30px;

		h2 {
			line-height: 50px;
			margin-bottom: 0;
			padding-left: 15px;
		}
	}

	.box {
		margin: 30px 0;

		.ant-col {
			padding: 0 10px;
		}
	}

	/* 笑脸、哭脸 */
	.monitor-face-smile,
	.monitor-face-cry {
		width: 50px;
		height: 50px;
		display: inline-block;
		background: #fbd971;
		border-radius: 50%;
		position: relative;
	}

	.monitor-face-smile>i,
	.monitor-face-smile:before,
	.monitor-face-smile:after,
	.monitor-face-cry>i,
	.monitor-face-cry:before,
	.monitor-face-cry:after {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		transform: rotate(225deg);
		border: 3px solid #f0c419;
		border-right-color: transparent !important;
		border-bottom-color: transparent !important;
		position: absolute;
		bottom: 8px;
		left: 11px;
	}

	.monitor-face-smile:before,
	.monitor-face-smile:after,
	.monitor-face-cry:before,
	.monitor-face-cry:after {
		content: '';
		width: 12px;
		height: 12px;
		left: 8px;
		top: 14px;
		border-color: #f29c1f;
		transform: rotate(45deg);
	}

	.monitor-face-smile:after,
	.monitor-face-cry:after {
		left: auto;
		right: 8px;
	}

	.echars-box {
		width: 100%;
		overflow: hidden;

		.bar_echars {
			width: 100%;
		}
	}
</style>